<template>
    <!-- 资产管理 -->
    <div class="assetManagement">
        <backHeader title="资产管理" backPath="/home"></backHeader>
        <header class="assetManagement-header" @click="()=>recordShow = true">
            <p>{{ recordData.title }}</p>
            <figure class="flex items-center"><img class="header-img" src="@/assets/image/assetManagement/record.png"></figure>
        </header>
        <nav class="assetManagement-nav" @click="()=>filterShow = true" v-show="filterList.length">
            <figure class="flex items-center"><img class="nav-img" src="@/assets/image/assetManagement/filter.png"></figure>
        </nav>
        <main class="assetManagement-main">
            <keep-alive>
                <component :is='recordData.component'></component>
            </keep-alive>
        </main>
        <van-popup v-model="recordShow" position="bottom" round closeable class="record-pop">
            <recordPop @selectMenu="selectMenu" :recordData="recordData" :list="recordList"/>
        </van-popup>    
        <van-popup v-model="filterShow" position="bottom" round class="filter-pop">
            <filterPop :filterList="filterList" @cancel="(val)=> filterShow = val" @confirm="confirm"/>
        </van-popup>
    </div>
</template>

<script>
import backHeader from '@/components/backHeader/index.vue';
import { Popup, Picker } from 'vant';
import recordPop from './recordPop.vue';
import filterPop from './filterPop.vue';
export default {
    components:{
        backHeader,
        [Popup.name]:Popup,
        [Picker.name]:Picker,
        recordPop,
        filterPop,
    },
    data() {
        return {
            recordShow:false,
            filterShow:false,
            recordData:{
                id:0,
                title:'资金记录',
                type:'',
                component:()=>import('./components/fundingRecords.vue'),
            },
            recordList:[
                {
                    id: 0,
                    title: '资金记录',
                    type: '',
                    component:()=>import('./components/fundingRecords.vue'),
                },
                {
                    id: 1,
                    title: '账单',
                    type: '',
                    component:()=>import('./components/bill.vue'),
                },
                {
                    id: 2,
                    title: '理财历史',
                    type: '',
                    component:()=>import('./components/financialHistory.vue'),
                },
                {
                    id: 3,
                    title: '借贷历史',
                    type: '',
                    component:()=>import('./components/loanHistory.vue'),
                },
                {
                    id: 4,
                    title: '兑换历史',
                    type: '',
                    component:()=>import('./components/exchangeHistory.vue'),
                },
                {
                    id: 5,
                    title: '返佣记录',
                    type: '',
                    component:()=>import('./components/fundingRecords.vue'),
                },
                {
                    id: 6,
                    title: 'AI',
                    type: '',
                    component:()=>import('./components/fundingRecords.vue'),
                },
                {
                    id: 7,
                    title: '订单中心',
                    type: '',
                    component:()=>import('./components/fundingRecords.vue'),
                },
            ],
            filter:[
                {
                    id:0,
                    children:[
                        {
                            id:0,
                            title:'全部',
                            type:''
                        },
                        {
                            id:1,
                            title:'AI购买',
                            type:''
                        },
                        {
                            id:2,
                            title:'单个 NFT',
                            type:'',
                        },
                        {
                            id:3,
                            title:'黄金AI收益',
                            type:'',
                        },
                    ]
                },
                {
                    id:1,
                    children:[
                        {
                            id:0,
                            title:'全部',
                            type:''
                        },
                        {
                            id:1,
                            title:'充值',
                            type:''
                        },
                        {
                            id:2,
                            title:'提现记录',
                            type:'',
                        },
                    ]
                },
                {
                    id:2,
                    children:[
                        {
                            id:0,
                            title:'全部',
                            type:''
                        },
                        {
                            id:1,
                            title:'活期',
                            type:'',
                        },
                        {
                            id:2,
                            title:'定期',
                            type:'',
                        },
                    ],
                },
                {
                    id:3,
                    children:[],
                },
                {
                    id:4,
                    children:[],
                },
                {
                    id:5,
                    children:[],
                },
                {
                    id:6,
                    children:[
                        {
                            id:0,
                            title:'全部',
                            type:''
                        },
                        {
                            id:1,
                            title:'运行中',
                            type:''
                        },
                        {
                            id:2,
                            title:'已完成',
                            type:'',
                        },
                    ]
                },
                {
                    id:7,
                    children:[
                        {
                            id:0,
                            title:'全部',
                            type:''
                        },
                        {
                            id:1,
                            title:'加密货币订单',
                            type:''
                        },
                        {
                            id:2,
                            title:'FX订单',
                            type:'',
                        },
                        {
                            id:3,
                            title:'股票合约订单',
                            type:'',
                        },
                        {
                            id:4,
                            title:'现货订单',
                            type:'',
                        },
                    ]
                },
            ],
            filterList:[],
        }
    },
    mounted() {
        this.filterList = this.filter[0].children;
    },
    methods: {
        selectMenu(data){
            this.recordData = data;
            this.filterList = this.filter[data.id].children;
            this.recordShow = false;
        },
        confirm(data){
            console.log(data,'data');
            this.filterShow = false;
        },
    },
}
</script>

<style lang="scss" scoped>
.assetManagement{
    background: #fff;
    .assetManagement-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #0E1015;
        color: #fff;
        padding: 0 40px 0 30px;
        height: 100px;
        width: 100%;
        box-sizing: border-box;
        font-size: 40px;
        .header-img{
            width: 40px;
            height: 24px;
        }
    }
    .assetManagement-nav{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 36px 0 30px;
        height: 80px;
        background-color: #FAFAFA;
        box-sizing: border-box;
        width: 100%;
        .nav-img{
            width: 46px;
            height: 46px;
        }
    }
    .assetManagement-main{
        box-sizing: border-box;
        margin-bottom: -6.75rem;
        background-color: #fff;
        ::v-deep .van-pull-refresh{
            min-height: 100vh;
        }
    }
    ::v-deep .record-pop, ::v-deep .filter-pop{
        background-color: #fff;
        width: 100%;
        padding: 32px;
        height: 50%;
        box-sizing: border-box;
        .van-icon{
            color: #000;
        }
    }
}
</style>